<template>
   <div class="left-container">
      <ProductItem 
        v-for="item in list"
        :key="item.id"
        :imgpath="item.imgpath"
        :title="item.title"
        :type="item.type"
        :posttime="item.posttime">
    </ProductItem>

   
      
   </div>
</template>

<script>
/**
 * 一、组件的通信方式有很多种，常见的有如下方式
 * 1、父组件向子组件通信
 * 2、子组件向父组件通信
 * 3、兄弟组件的通信
 * 4、跨级组件的通信
 * 5、无规则组件通信
 * 二、父组件向子组件通信的步骤
 *  父组件向子组件通信采用props
 * 1、在子组件中定义props选项: props:['imgpath','title','type','posttime']
 * 2、在组件的template中使用插值表达式或者v-bind指令来进行占位和绑定数据
 * 3、在父组件中引用组件的时候进行传值
 */
import ProductItem from '@/components/ProductItem.vue'

export default {
    data(){
        return{
            list:[
                {
                    id:1,
                    imgpath:'http://s2.jiguo.com/7b57465b-4398-4fb8-9d8b-fa15d82e95c6/640?imageView2/1/w/259/h/145/q/100',
                    title:'从内至外，处处全能，惠普星Book Pro 14锐龙版，时刻给你好看',
                    type:'数码家电 | 电脑设备',
                    posttime:"09-01"
                },
                 {
                    id:2,
                    imgpath:'http://s2.jiguo.com/93fee3b8-7a73-42ea-9805-7a12646dbfe6/640?imageView2/1/w/259/h/145/q/100',
                    title:'跨设备文件传输竞速PK，华为MateBook真·效率之王',
                    type:'数码家电 | 电脑设备',
                    posttime:"08-28"
                },
                {
                    id:3,
                    imgpath:'http://s2.jiguo.com/4534f466-41e5-4cdd-839a-ee347fa1b1e9/640?imageView2/1/w/259/h/145/q/100',
                    title:'跨设备文件传输竞速PK，华为MateBook真·效率之王',
                    type:'数码家电 | 电脑设备',
                    posttime:"08-28"
                }
            ]
        }
    },
    components:{ProductItem}
}
</script>

<style>
    .left-container{
       display: flex;
        height: 100vh;
    }
</style>